<template>
  <a-modal
    :title="isEdit ? '修改设备' : '新增设备'"
    :visible="show"
    @cancel="handleCancel"
    width="30%"
    class="procedure-modal"
  >
    <a-form-model
      ref="ruleForm"
      :model="item"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="rules"
    >
      <a-form-model-item label="设备编号">
        <a-input v-model="item.ProSegmentNo" />
      </a-form-model-item>
      <a-form-model-item label="资产编号">
        <a-input v-model="item.ProSegmentAssetNo" />
      </a-form-model-item>
      <a-form-model-item label="设备名称">
        <a-input v-model="item.ProSegmentName" />
      </a-form-model-item>
      <a-form-model-item label="设备类型">
        <a-select v-model="item.ProSegmentTypeID">
          <a-select-option
            v-for="item in proSegmentTypeNetList"
            :key="item.ProSegmentTypeID"
            :value="item.ProSegmentTypeID"
          >
            {{ item.ProSegmentTypeName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="设备状态">
        <a-select v-model="item.ProSegmentStatus" :disabled="!isEdit">
          <a-select-option
            v-for="item in proSegmentStatusList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="设备类别">
        <a-select v-model="item.ProSegmentType">
          <a-select-option
            v-for="item in proSegmentTypeList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="清洗管控">
        <a-checkbox v-model="item.IsControl"> </a-checkbox>
      </a-form-model-item>
      <a-form-model-item label="是否多灌液系统">
        <a-checkbox v-model="item.IsMultiSystem"> </a-checkbox>
      </a-form-model-item>
      <a-form-model-item label="清洗有效时长(H)">
        <a-input v-model="item.ValidityTime" />
      </a-form-model-item>
      <a-form-model-item label="清洗持续时长(min)">
        <a-input v-model="item.CleanTime" />
      </a-form-model-item>
      <a-form-model-item label="厂区类别">
        <a-select
          :allowClear="true"
          class="selectwidth"
          v-model="item.WSType"
          placeholder="请选择"
          @change="handleChange"
        >
          <a-select-option
            v-for="item in wsTypeList"
            :key="item.type"
            :value="item.type"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="车间" prop="SegmentID">
        <a-select
          :allowClear="true"
          class="selectwidth"
          v-model="item.SegmentID"
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in QSegmentList"
            :key="item.type"
            :value="item.type"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="生产拉线">
        <a-select
          :allowClear="true"
          class="selectwidth"
          v-model="item.ProductLineID"
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in productLineList"
            :key="item.SegmentID"
            :value="item.SegmentID"
            >{{ item.SegmentName }}</a-select-option
          >
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="设备描述">
        <a-input v-model="item.ProSegmentRemark" />
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <a-button :loading="loading" @click="handleCancel"> 返回 </a-button>
      <a-button type="primary" :loading="loading" @click="handleOk">
        提交
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import {
  insProSegment,
  updProSegment,
  getProductLineList,
} from "@/api/ProSegmentType/index";
import { debounce } from "@/common/debounce";
import { GetSegments } from "@/api/NBCSegment/index";
export default {
  props: {
    show: Boolean,
    isEdit: Boolean,
    item: Object,
    proSegmentTypeList: Array,
    isControlList: Array,
    proSegmentStatusList: Array,
    proSegmentTypeNetList: Array,
    wsTypeList: Array,
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      loading: false,
      rules: {
        ProSegmentTypeName: [
          {
            required: true,
            message: "请填写类型名称",
            trigger: "blur",
          },
        ],
      },
      QSegmentList: [], //车间列表
      productLineList: [], //生产拉线列表
    };
  },
  mounted() {},
  watch: {
    show(newValue, oldValue) {
      if (newValue && this.isEdit && this.item.WSType) {
        this.GetSegmentsAllFun(this.item.WSType, true);
        this.getProductLineFun(this.item.WSType, true);
      }
    },
    deep: true,
  },
  computed: {},
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$emit("update:show", false);
      this.$refs.ruleForm.resetFields();
      this.QSegmentList = [];
    },
    //确认添加/修改
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          this.$message.error("请填写必填项");
          return;
        }

        this.loading = true;

        try {
          if (this.isEdit) {
            let res = await updProSegment([this.item]);
            console.log(res);
            if (!res.Success) throw new Error(res.Message);
            this.$message.success("修改成功");
            this.handleCancel();
            this.$emit("updata");
          } else {
            let res = await insProSegment([this.item]);
            if (!res.Success) throw new Error(res.Message);
            this.$message.success("新增成功");
            this.handleCancel();
            this.$emit("updata");
          }
        } catch (e) {
          console.log(e);
          this.$message.error(e.message || "操作失败，请重试");
        } finally {
          this.loading = false;
        }
      });
    },
    //选中厂区
    handleChange(value) {
      let that = this;
      if (value) {
        that.GetSegmentsAllFun(that.item.WSType, true);
        that.getProductLineFun(that.item.WSType, true);
      }
    },

    //获取车间列表
    GetSegmentsAllFun: debounce(async function (WSType) {
      let that = this;
      let SegSegmentID = [
        "1735FA0C-33E4-4B25-AAA2-DE084FB7D1E3",
        "5D494A1E-5F24-4036-9350-2E442A19FE87",
        "CCDB0114-7026-4218-A507-5C00E870B0B3",
        "12FF8C8D-B2DC-4554-AA9B-91703F4AB200",
        "0D3C49AA-BBB3-402A-B618-FBEBED4CC85E",
      ];
      let res = await GetSegments({
        SegSegmentID: SegSegmentID,
        WSTypeList: [WSType],
      });
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.SegmentID, name: item.SegmentName });
        });
        that.QSegmentList = wtList;
      } else {
        that.$message.error(res.Message);
      }
    }),
    /** 获取生产拉线 */
    getProductLineFun: debounce(async function (WSType) {
      let that = this;
      try {
        let res = await getProductLineList({
          WSType: [WSType],
        });
        this.productLineList = res.Data;
      } catch (e) {
        that.$message.error(e);
      }
    }),
  },
};
</script>
<style scoped></style>
